<template>
  <div>
    <div>
      <el-row>
        <el-col :span="5">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
          </el-input>
          <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              @node-drag-start="handleDragStart"
              @node-drag-enter="handleDragEnter"
              @node-drag-leave="handleDragLeave"
              @node-drag-over="handleDragOver"
              @node-drag-end="handleDragEnd"
              @node-drop="handleDrop"
              ref="tree"
              draggable
              lazy
              :props="defaultProps"
              :load="loadSonTreeData"
              :allow-drop="allowDrop"
              :allow-drag="allowDrag"
              :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span style="margin-right: 10px">{{ data.menuName }}</span>
                  <span>
                    <el-button
                        type="text"
                        size="small"
                        @click="() => appendTreeItem(data)">
                      增加
                    </el-button>
                    <el-button
                        type="text"
                        size="small"
                        @click="() => appendTreeItem(data)">
                      修改
                    </el-button>
                    <el-button
                        type="text"
                        size="small"
                        @click="() => removeTreeItem(node, data)">
                      删除
                    </el-button>
                  </span>
                </span>
          </el-tree>
<!--          <el-tree ref="tree" :data="data" :props="defaultProps" v-loading="treeLoading" :filter-node-method="filterNode" @node-click="handleNodeClick"></el-tree>-->
        </el-col>
        <el-col :span="19" >
          <div id="searchForm">
            <el-row :gutter="8">
              <el-col :span="19">
                <el-form :model="queryParams" ref="queryParams" size="big" :inline="true" label-width="68px" >
                  <el-form-item label="文件名" prop="fileName">
                    <el-input
                        placeholder="请输入搜索文件名 "
                        v-model="queryParams.fileName"
                        style="width: 200px;margin-right: 15px"
                        clearable>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="存储日期" prop="fileDate">
                    <div class="block">
                      <el-date-picker
                          v-model="queryParams.fileDate"
                          align="right"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                          :picker-options="pickerOptions">
                      </el-date-picker>
                    </div>
                  </el-form-item>
                  <el-form-item label="用户名" prop="fileType">
                    <el-input
                        v-show="$cookies.get('admin') === 'true'"
                        placeholder="请输入搜索用户名 "
                        v-model="queryParams.fileAuthor"
                        style="width: 200px;margin-right: 15px"
                        clearable>
                    </el-input>
                  </el-form-item>
<!--                  <el-form-item label="后缀类型" prop="fileSuffix">
                    <el-select v-model="queryParams.fileSuffix">
                      <el-option v-for="item in fileSuffixList" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>-->
                  <el-button icon="el-icon-search" circle type="success" @click="submitSearch"></el-button>
                  <el-button icon="el-icon-refresh-left" circle type="danger" @click="resetQueryParams"></el-button>
                </el-form>
              </el-col>
              <el-col :span="5" >
                <el-button type="primary" @click="upload">上传文件</el-button>
                <el-button @click="logout">登出</el-button>
              </el-col>
            </el-row>
          </div>
          <el-table v-loading="loading" :data="fileList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="文件id" align="center" prop="fileId" />
            <el-table-column label="文件名" align="center" prop="fileName" width="180"/>
            <el-table-column label="文件后缀" align="center" prop="fileSuffix" />
            <el-table-column label="文件大小" align="center" prop="fileSize" >
              <template slot-scope="scope">
                <el-tag>{{fileSizeTrans(scope.row.fileSize)}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="创建日期" align="center" prop="fileDate" />
            <el-table-column label="文件备注" align="center" prop="fileRemark" />
            <el-table-column label="拥有者" align="center" prop="fileAuthor"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                    v-show="scope.row.fileSuffix === '.jpg' || scope.row.fileSuffix === '.png' || scope.row.fileSuffix === '.mp4'"
                    size="small"
                    type="text"
                    icon="el-icon-view"
                    @click="showPreview(scope.row)"
                >预览</el-button>
                <el-button
                    size="small"
                    type="text"
                    icon="el-icon-download"
                    @click="handleDownload(scope.row)"
                >下载</el-button>
                <el-button
                    size="small"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <div style="margin-top:20px">
        <p style="float: right;height: 31px;line-height: 31px;font-size: 15px; color: #666666">总页数：{{this.pages}}</p>
        <el-pagination
            style="float: right;"
            :current-page.sync="pageNum"
            :page-size="pageSize"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

      <p style="clear: both"></p>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="400px" @close="resetFileList" append-to-body>
      <!--*action="/api/file/upload"-->
      <el-upload
          class="upload-demo"
          drag
          ref="upload"
          action=""
          :http-request="fileUpload"
          :auto-upload="false"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        <div class="el-upload__tip" slot="tip">上传文件只能是 exe、txt、xml、zip、jpg、png、yml、mp4且不超过100MB</div>
      </el-upload>
      <el-form :model="form" ref="form" size="big" :rules="rules" :inline="true" label-width="88px" style="margin-top: 20px">
        <el-form-item label="文件注释:" prop="fileRemark">
          <el-input v-model="form.fileRemark"  placeholder="请输入文件注释"></el-input>
        </el-form-item>
        <el-form-item label="文件分类:" prop="fileParent">
          <el-select v-model="form.fileParent">
            <el-option v-for="item in fileParents" :key="item.id" :label="item.menuName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button style="margin-top: 15px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      </el-form>
    </el-dialog>
    <el-dialog
        title="预览"
        :visible.sync="previewOpen"
        :close="closePreview"
        width="35%">
      <el-image v-show="fileAddress != null && (fileSuffix === '.jpg' ||fileSuffix === '.png')" :src="fileAddress" width="600px" height="600px"/>
      <vue-core-video-player :src="fileAddress" v-if="fileAddress != null && fileSuffix === '.mp4' && previewOpen" :autoplay="false" ref="video"/>
    </el-dialog>
    <el-dialog
        title="增加树"
        :visible.sync="addTreeNode"
        :close="closePreview"
        width="35%">

      </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import error from "@/views/error.vue";

export default {
  name: "fileIO",
  data() {
    return {
      //tree过滤搜索框
      filterText: '',
      queryParams:{
        fileParent: 0,
        fileName: null,
        fileDate: null,
        fileSuffix: null,
        fileSize: null,
        fileAuthor: null,
      },
      form:{
        fileId: 0,
        fileRemark: '',
        fileParent: null,
      },
      rules:{
        fileParent: [
          { required: true, message: '请选择文件分类', trigger: 'change' }
        ],
      },
      treeMenu:{
        parentId: null,
        id: null,
        sort: 0,
        treeLevel: 0,
        isLeaf: false,
      },
      //文件类型
      fileParents: null,
      //标题
      title: "上传文件dialog",
      //dialog打开状态
      open: false,
      //加载状态
      loading: false,
      //属性图菜单加载状态
      treeLoading: false,
      //预览菜单状态
      previewOpen: false,
      //增加条目dialog显示状态
      addTreeNode: false,
      //参数表
      fileList: null,
      //总条数
      total:10,
      //总页数
      pageSize: null,
      //页数
      pages: 0,
      //当前页
      pageNum: 1,
      //存储路径，到时候需要更改
      fileLocation: 'http://172.16.30.17:8080/resources',
      //文件地址
      fileAddress: '',
      //文件后缀
      fileSuffix: '',
      //视频是否可见
      playerVisible: '',
      //日期参数
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      fileSuffixList:[
        {label: 'txt', value: '.txt'},
        {label: 'xml', value: '.xml'},
        {label: 'exe', value: '.exe'},
        {label: 'zip', value: '.zip'},
        {label: 'jpg', value: '.jpg'},
        {label: 'png', value: '.png'},
        {label: 'yml', value: '.yml'},
        {label: 'mp4', value: '.mp4'},
      ],
      data: null,
      defaultProps: {
        children: 'children',
        label: 'menuName',
        isLeaf: 'leaf'
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  /**
   * 钩子方法
   */
  created() {
    this.getList();
    this.getTree();
    //this.getParents();
  },
  methods: {
    upload(){
      this.open = true;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    //增加数据到tree中
    appendTreeItem(data) {
      //打开dialog
      this.addTreeNode = true;
      const newChild = { id: id++, menuName: 'testtest', children: [] };
      if (!data.children) {
        this.$set(data, 'children', []);
      }
      data.children.push(newChild);
    },
    //删除数据到tree中
    removeTreeItem(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
    //开始移动
    handleDragStart(node, ev) {
      //console.log('drag start', node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      //console.log('tree drag enter: ', draggingNode, dropNode);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      //console.log('tree drag leave: ', draggingNode, dropNode);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      //console.log('tree drag over: ', draggingNode, dropNode);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      //console.log('tree drag end: ', dropNode && dropNode.data, dropType);
    },
    //当松开拖拽时的监听，draggingNode为移动参数，dropNode为在其前后，或内的数据
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log('tree drop: ', draggingNode, dropNode, dropType);
      //如果draggingNode的等级大于与dropNode证明进行了向外的outside拖拽动作
      //如果dragging和drop的父parent相同，那么parentid无需改变，反之需要改变为dropNode的parentId
     /* let changeLevel;
      if(draggingNode.data.treeLevel > dropNode.data.treeLevel){
        changeLevel = "smaller"
      }else if(draggingNode.data.treeLevel < dropNode.data.treeLevel){
        changeLevel = "bigger"
      }*/

      this.treeMenu.id = draggingNode.data.id;
      this.treeMenu.isLeaf = draggingNode.data.isLeaf;
      if(draggingNode.data.children == null){
        this.treeMenu.isLeaf = true;
      }
      switch (dropType) {
        case "before":
          this.treeMenu.parentId = dropNode.data.parentId;
          this.treeMenu.treeLevel = dropNode.data.treeLevel;
          this.treeMenu.sort = dropNode.data.sort + 1;
          break
        case "after":
          this.treeMenu.parentId = dropNode.data.parentId;
          this.treeMenu.treeLevel = dropNode.data.treeLevel;
          //如果再dropnode后则sort-1
          this.treeMenu.sort = dropNode.data.sort - 1;
          break
        case "inner":
          //如果当前操作节点为叶子节点，需要更新其为非叶子节点
          if(dropNode.data.leaf){
            axios.post('api/file/move',{
              id: dropNode.data.id,
              isLeaf: false,
            }).then((res) =>{
              if(res.data.responseCode === 200) {
                load
              }else {
                this.$notify({
                  title: '修改错误',
                  message: res.data.message,
                  duration: 3000,
                  type: 'error',
                });
              }
            }).catch(error=>{
              this.$notify({
                title: '修改错误',
                message: error.message,
                duration: 3000,
                type: 'error',
              });
            })
          }
          this.treeMenu.parentId = dropNode.data.id;
          this.treeMenu.treeLevel = dropNode.data.treeLevel + 1;
          break;
        case "none":
          return;
        default:
          return;
      }
      console.log(this.treeMenu)
      axios.post('api/file/move',this.treeMenu).then((res) =>{
        if(res.data.responseCode === 200) {
          this.update();
        }else {
          this.$notify({
            title: '修改错误',
            message: res.data.message,
            duration: 3000,
            type: 'error',
          });
        }
      }).catch(err =>{
        this.$notify({
          title: '修改错误',
          message: err.message,
          duration: 3000,
          type: 'error',
        });
      })
      //重载参数
      this.resetTreeMenuParams();
    },
    allowDrop(draggingNode, dropNode, type) {
      //如果参数等于该参数则不允许inner操作
      if (dropNode.data.menuName === '二级 3-1') {
        return type !== 'inner';
      } else {
        return true;
      }
    },
    allowDrag(draggingNode) {
      //console.log("allow drag")
      //console.log(draggingNode)
      //return draggingNode.data.menuName.indexOf('所有资源') === -1;
      //默认允许drag操作
      return true;
    },
    // 更新视图代码
    update(){
      let key = this.$refs.tree.getCurrentKey()
      let node = this.$refs.tree.getNode(key)
      console.log(key)
      console.log(node)
      // 请求
      // 修改的关键代码，会重新触发loadNode函数
      node.parent.loaded = false
      node.parent.expand()
      this.formEdit = false
    },
    //懒加载方法
    loadSonTreeData(node, resolve){
      axios.get('api/file/trees',{
        params:{
          //如果为0则默认是最高位
          parentId: node.id !== 0 ? node.data.id : 0,
        }
      }).then((res) => {
        if(node.id!==0){
          resolve(res.data.objectResult);
        }
      })
    },
    //重载参数
    resetTreeMenuParams(){
      this.treeMenu = {
        parentId: null,
        id: null,
        sort: 0,
        treeLevel: 0,
        isLeaf: false,
      }
    },
    /**
     * 左边属性图筛选数据
     * @param value
     * @param data
     * @returns {boolean}
     */
    filterNode(value, data) {
      console.log(value)
      if (!value) return true;
      return data.menuName.indexOf(value) !== -1;
    },
    //左边侧边栏选中数据
    handleNodeClick(data) {
      switch (data.treeLevel){
        //最高等级获取全部参数
        case 0:
          this.queryParams.fileParent = null;
          this.queryParams.fileSuffix = null;
          break;
        //二级菜单获取其id，传递给parentId
        case 1:
          this.queryParams.fileParent = data.id;
          this.queryParams.fileSuffix = null;
          break;
        //三级菜单直接获取其名称，传递给suffixname
        case 2:
          this.queryParams.fileParent = null;
          this.queryParams.fileSuffix = '.'+data.menuName;
          break;
      }
      //进行请求
      this.getList();
    },
    /**
     * 下载文件
     */
    handleDownload(row){
      axios.get("api/file/download",{
        params:{
          fileId: row.fileId,
        },
        responseType:'blob'
      }).then(res => {
        let url = window.URL.createObjectURL(new Blob([res.data]));
        let link= document.createElement('a');
        link.style.display='none';
        link.href=url;
        link.setAttribute('download', res.headers['content-disposition']);
        document.body.appendChild(link);
        link.click();
      }).catch(res =>{
        this.$notify({
          title: '下载失败',
          message: "下载失败，文件不存在！请告知后台管理人员！",
          duration: 3000,
          type: 'error',
        });
      });
    },
    //进行演示
    showPreview(row){
      this.previewOpen = true;
      this.fileAddress = this.fileLocation + '/' + row.fileName;
      this.fileSuffix = row.fileSuffix;
    },
    closePreview(){
      this.previewOpen = false;
      this.fileAddress = null;
      this.fileSuffix = null;
      this.$refs.video.close()
    },
    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ["exe", "txt", "xml", "zip", "jpg", "png", "yml", "mp4"];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$notify({
          title: '上传失败',
          message: "上传文件只能是 exe、txt、xml、zip、jpg、png、yml、mp4",
          duration: 3000,
          type: 'warning',
        });
        return false;
      }
      const isLt100M = file.size / 1024 / 1024 < 100;

      if (!isLt100M) {
        this.$notify({
          title: '上传失败',
          message: "上传文件大小不能超过 100MB",
          duration: 3000,
          type: 'warning',
        });
        return false;
      }
    },
    /** 查询流水列表 */
    getList() {
      this.loading = true;
      axios.get("api/file/list", {
        params:{
          fileParent: this.queryParams.fileParent,
          fileName: this.queryParams.fileName,
          fileDate: this.queryParams.fileDate,
          pageNum: this.pageNum,
          fileSuffix: this.queryParams.fileSuffix,
          fileAuthor: this.queryParams.fileAuthor
        }
      }).then((res)=>{
          if(res.data.responseCode === 200){
            this.fileList = res.data.objectResult.list;
            this.total = parseInt(res.data.objectResult.total);
            this.pageSize = parseInt(res.data.objectResult.pageSize);
            this.pages = res.data.objectResult.pages;
            this.pageNum = parseInt(res.data.objectResult.pageNum);
            this.loading = false;
          }else {
            this.loading = false
            this.$notify({
              title: '登录错误',
              message: '请先登录在进行操作',
              duration: 3000,
              type: 'error',
            });
            this.$router.push({path: '/'});
          }
        }).catch(err=>{
          this.$message({
              type: 'error',
              message: res.data.message
          })
      })
    },
    /** 查询树列表 */
    getTree() {
      this.treeLoading = true;
      axios.get("api/file/trees",{
        params: {
          parentId: 0
        }
      }).then((res)=> {
        //console.log(res.data.result)
        if(res.data.responseCode === 200){
          this.data = res.data.objectResult
          this.treeLoading = false;
        }else {

        }
      }).catch(error=>{
        this.$notify({
          title: '菜单树错误',
          message: '菜单树获取错误！',
          duration: 3000,
          type: 'error',
        });
      })
      this.treeLoading = false;
    },
    /**
     * 获取parents
     */
    getParents(){
      axios.get('api/file/parents').then(res => {
        this.fileParents = res.data.objectResult
      })
    },
    /**
     * 文件大小转换
     * @param limit
     * @returns {string}
     */
    fileSizeTrans(limit){
      var size = "";
      if( limit < 0.1 * 1024 ){
        //如果小于0.1KB转化成B
        size = limit.toFixed(2) + "B";
      }else if(limit < 0.1 * 1024 * 1024 ){
        //如果小于0.1MB转化成KB
        size = (limit / 1024).toFixed(2) + "KB";
      }else if(limit < 0.1 * 1024 * 1024 * 1024){
        //如果小于0.1GB转化成MB
        size = (limit / (1024 * 1024)).toFixed(2) + "MB";
      }else{
        //其他转化成GB
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      }
      var sizestr = size + "";
      var len = sizestr.indexOf("\.");
      var dec = sizestr.substr(len + 1, 2);
      if(dec == "00"){
        //当小数点后为00时 去掉小数部分
        return sizestr.substring(0,len) + sizestr.substr(len + 3,2);
      }
      return sizestr;
    },
    submitUpload(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          //上传
          this.$refs.upload.submit();
        }
      });
    }
    ,
    /**
     * 进行提交操作
     */
    fileUpload(param) {
     /* this.$refs.form.validate((valid) => {
        if (valid) {
          //上传
          this.$refs.upload.submit();
        }
      });*/
      let file = param.file;
      let formData = new FormData();
      formData.append('file', file);
      formData.append("fileRemark", this.form.fileRemark);
      formData.append("fileParent",this.form.fileParent);
      axios.post('api/file/upload',formData).then(( res )=>{
        if(res.data.responseCode === 200){
          this.$notify({
            title: '上传成功',
            message: '已将文件上传到服务器',
            duration: 3000,
            type: 'success'
          });
          this.getList();
        }else {
          this.$notify({
            title: '上传失败',
            message: res.data.message,
            duration: 3000,
            type: 'error'
          });
        }
      }).catch(error => {
        this.$notify({
          title: '上传失败',
          message: error.message,
          duration: 3000,
          type: 'error'
        });
        this.getList();
      })
    },
    /**
     * 进行搜索操作
     */
    submitSearch(){
      this.getList();
    },
    handleCurrentChange(val){
      this.pageNum = val;
      this.getList()
    },
    /**
     * 上传成功方法
     * @param res response
     * @param file
     * @param fileList
     */
    uploadSuccess(res, file, fileList) {
      console.log(res);
      if (res.responseCode === 200) {
        //传递id
        /*this.form.fileId = res.objectResult.fileId;
        axios.post("api/file/remark", this.form).then(res=>{
          console.log(res.data);
        })*/
        this.$notify({
          title: '上传成功',
          message: '已将文件上传到服务器',
          duration: 3000,
          type: 'success'
        });
      }else {
        this.$notify({
          title: '上传失败',
          message: res.message,
          duration: 3000,
          type: 'error'
        });
        this.$refs.upload.abort(file)
        let uid = file.uid // 关键作用代码，去除文件列表失败文件
        let idx = fileList.findIndex(item => item.uid === uid) // 关键作用代码，去除文件列表失败文件（uploadFiles为el-upload中的ref值）
        console.log(idx,"=======",fileList);
        fileList.splice(idx, 1) // 关键作用代码，去除文件列表失败文件
      }
      //刷新
      this.getList();
    },
    /**
     * 删除方法
     * @param file
     * @param fileList
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    /!**
     * 预加载方法
     * @param file
     *!/
    handlePreview(file) {
      console.log(file);
    },*/
    resetFileList(){
      this.$refs.upload.clearFiles()
      this.resetForm();
    },
    /**
     * 重载表单
     */
    resetQueryParams(){
      this.queryParams= {
        fileName: null,
        fileDate: null,
        fileSuffix: null,
        fileSize: null,
        fileAuthor: null,
        fileParent: null
      }
      //刷新
      this.getList();
    },
    resetForm(){
      this.form= {
        fileId: null,
        fileParent: null,
        fileRemark: null,
      }
    },
    /**
     * 登出
     */
    logout(){
      this.$cookies.remove("token")
      this.$router.push({path:'/'})
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      //const ids = row.fileId || this.ids;
      this.queryParams.fileId = row.fileId;
      this.queryParams.fileName = row.fileName;
      this.queryParams.fileSuffix = row.fileSuffix;
      this.queryParams.fileSize = row.fileSize;
      this.queryParams.fileAuthor = row.fileAuthor;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('api/file/delete',this.queryParams)
            .then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //清空参数
              this.resetQueryParams();
              this.getList();
            }).catch((error) => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
        });
      });
    }
  }
}
</script>

<style scoped>
#container{
  padding-top: 0px;
}
</style>